{% extends 'base/front_base.html' %}


{% block title %}
    小饭桌
{% endblock title %}
    
{% block head %}
<!-- 图标 -->
<link rel="stylesheet" href="{% static 'css/news/index.min.css' %}">
<script src="{% static 'js/index.min.js' %}">
  
</script>
{% endblock head %}
{% block main %}
<!-- 中间的主体内容 -->
<div class="main">
    <div class="wrapper">
        <div class="main_content_wrapper">
            <!-- 轮播组件，包含图、pageControl、arrow箭头 -->
            <div class="banner_gruop" id="banner_gruop">
                <!-- 轮播图 -->
                <ul class="banner_ul" id="banner_ul">
                    <li><a href="#"><img src="{% static 'img/banner1.jpg' %}" alt=""></a></li>
                    <li><a href="#"><img src="{% static 'img/banner2.jpg' %}" alt=""></a></li>
                    <li><a href="#"><img src="{% static 'img/banner3.jpg' %}" alt=""></a></li>
                </ul>
                <!-- 左右箭头 -->
                <span class="arrow left_arrow" id="left_arrow">‹</span>
                <span class="arrow right_arrow" id="right_arrow">›</span>
                <!-- 小圆点 -->
                <div class="page_control_group">
                    <ul class="page_control" id="page_control">
                        <!-- 这里是pageControl，也就是小圆点，动态生成 -->
                    </ul>
                </div>
            </div>
            <!-- 新闻组 -->
            <div class="list_outer_group">
                <!-- 新闻标签 -->
                <ul class="list_tab">
                    <li class="active"><a href="">最新资讯</a></li>
                    <li><a href="">新消费</a></li>
                    <li><a href="">金融科技</a></li>
                    <li><a href="">出行物流</a></li>
                </ul>
                <!-- 新闻简介 -->
                <ul class="list_inner_group">
                    <li>
                        <div class="thumbnail_group">
                            <a href="#">
                                <img src="https://static-image.xfz.cn/1565060483_314.png-website.news.list" alt="">
                            </a>
                        </div>
                        <div class="news_group">
                            <p class="title">
                                <a href="news_detail.html">
                                    早报：国内首款5G手机今日开售；NASA协助马斯克开发太空技术；沃尔玛申请数字加密货币专利
                                </a>
                            </p>
                            <p class="desc">法拉第未来的FF 91现身洛杉矶引围观。</p>
                            <p class="more">
                                <span class="category">中兴5G手机</span>
                                <span class="pub_time">一小时前</span>
                                <span class="author">huixiong</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="thumbnail_group">
                            <a href="#">
                                <img src="https://static-image.xfz.cn/1565060483_314.png-website.news.list" alt="">
                            </a>
                        </div>
                        <div class="news_group">
                            <p class="title">
                                <a href="#">
                                    早报：国内首款5G手机今日开售；NASA协助马斯克开发太空技术；沃尔玛申请数字加密货币专利
                                </a>
                            </p>
                            <p class="desc">法拉第未来的FF 91现身洛杉矶引围观。</p>
                            <p class="more">
                                <span class="category">中兴5G手机</span>
                                <span class="pub_time">一小时前</span>
                                <span class="author">huixiong</span>
                            </p>
                        </div>
                    </li>
                </ul>
                <div class="load_more_group">
                    <button class="load_more">
                        查看更多
                    </button>
                </div>
            </div>
        </div>
        {% include 'common/siderbar.html' %}
    </div>
</div>
{% endblock  %}